<template>
	<view>
		<view class="recomDiv">
			<img src="/static/bg1.png" alt="" />
		</view>
		<view class="recomDivTop">
			<u-sticky>
				<view class="recomDivTopDiv">
					<view class="recomDivTopDivItem" @click="changeRecom(1)"
						:class="selectNum==1?'changeRecomDivTopDivItem':''">
						<view class="recomDivTopDivItemImg">
							<img v-if="selectNum==1" src="/static/recommend/img2.png" alt="" />
							<img v-else src="/static/recommend/img1.png" alt="" />
						</view>
						<span>景区榜</span>
					</view>
					<view class="recomDivTopDivItem" @click="changeRecom(2)"
						:class="selectNum==2?'changeRecomDivTopDivItem':''">
						<view class="recomDivTopDivItemImg">
							<img v-if="selectNum==2" src="/static/recommend/img4.png" alt="" />
							<img v-else src="/static/recommend/img3.png" alt="" />
						</view>
						<span>民宿榜</span>
					</view>
					<view class="recomDivTopDivItem" @click="changeRecom(3)"
						:class="selectNum==3?'changeRecomDivTopDivItem':''">
						<view class="recomDivTopDivItemImg">
							<img v-if="selectNum==3" src="/static/recommend/img6.png" alt="" />
							<img v-else src="/static/recommend/img5.png" alt="" />
						</view>
						<span>商品榜</span>
					</view>
				</view>
			</u-sticky>
		</view>

		<view class="recomDivList">
			<scroll-view scroll-y="true" style="height: 85vh;" refresher-background="#FFF">
				<view class="recomDivListItem" v-for="(item,index) in recomDivListData" :key="index"
					@click="jumpTo(item)">
					<view class="recomDivListItemImg">
						<img :src="item.photo[0]" alt="" />
					</view>
					<view class="recomDivListItemTop">
						{{item.top}}
					</view>
					<view class="recomDivListItemText">
						<view style="width: 85%;">
							<view class="textH"><span style="margin-right: 20rpx;">{{item.name}}</span> <span
									v-if="item.label">{{item.label}}</span>
							</view>
							<view class="textH1" v-if="item.recommendationRate">
								推荐指数:<u-rate :value="item.recommendationRate" readonly></u-rate>
							</view>
							<view class="textBot" v-if="item.address">
								<u-icon name="map" color="#44aa77" size="28"></u-icon> {{item.address}}
							</view>
						</view>
						<view class="textBotGo">
							GO>
						</view>
					</view>
				</view>
			</scroll-view>
		</view>

	</view>
</template>

<script>
	import {
		getIndexSlideshow,
		getIndexMenu,
		getnewsGuide,
		browsingHistoryAdd,
		scenicAreaRecommendation,
		commodityRecommendation,
		hotels
	} from '@/api/home.js'
	export default {
		data() {
			return {
				selectNum: 1,
				recomDivListData: []
			};
		},
		methods: {
			// 跳转到详情页面
			jumpTo(item) {
				if (this.selectNum == 1) {
					uni.navigateTo({
						url: `/pages/scenicSpotDetails/scenicSpotDetails?id=${item.id}`
					})
				} else if (this.selectNum == 2) {
					uni.navigateTo({
						url: `/pages/homestayDetails/homestayDetails?id=${item.id}`
					})
				} else if (this.selectNum == 3) {
					this.getRecommend()
				}

			},
			// 获取商品推荐数据
			async getRecommend() {
				let res = await commodityRecommendation()
				if (res.code == 200) {
					console.log(res, '商品');
					this.recomDivListData = res.data
				}
			},
			// 获取景区列表数据
			async getScenicSpot() {
				let res = await scenicAreaRecommendation()
				if (res.code == 200) {
					console.log(res, '景区');
					this.recomDivListData = res.data
				}
			},
			// 获取民宿列表
			async getHotelsData() {
				let res = await hotels()
				if (res.code == 200) {
					console.log(res, '民宿');
					this.recomDivListData = res.data
				}
			},
			// 顶部菜单切换
			changeRecom(num) {
				this.selectNum = num
				if (num == 1) {
					this.getScenicSpot()
				} else if (num == 2) {
					this.getHotelsData()
				} else if (num == 3) {
					this.getRecommend()
				}
			}
		},
		onLoad() {
			this.getScenicSpot()
		}
	}
</script>

<style lang="scss">
	.recomDivList {
		width: 100%;
		padding: 0 30rpx;
		margin-top: -160rpx;
		padding-bottom: 40rpx;

		.recomDivListItem {
			width: 100%;
			height: 500rpx;
			margin-bottom: 30rpx;
			position: relative;

			.recomDivListItemTop {
				position: absolute;
				background-color: #ffffffd1;
				padding: 20rpx;
				border-radius: 40rpx;
				right: 20rpx;
				top: 20rpx;
				color: #44aa77;
				font-size: 40rpx
			}

			.recomDivListItemText {
				width: 100%;
				position: absolute;
				z-index: 2;
				padding: 20rpx 40rpx;
				bottom: 0;
				background: rgba(255, 255, 255, 0.1);
				border-radius: 0 0 50rpx 50rpx;
				backdrop-filter: blur(5px);
				-webkit-backdrop-filter: blur(5px);
				display: flex;
				align-items: center;
				justify-content: space-between;

				.textBotGo {
					display: flex;
					align-items: center;
					justify-content: center;
					color: #44aa77;
					font-weight: bold;
				}

				.textBot {
					display: flex;
					align-items: center;
					gap: 10rpx;
					color: #44aa77;
					font-weight: bold;
				}

				.textH1 {
					font-size: 40rpx;
					width: 100%;
					color: #fff;
					display: flex;
					align-items: center;
					font-weight: bold;
				}

				.textH {
					font-size: 40rpx;
					width: 100%;
					overflow: hidden;
					word-wrap: break-word;
					color: #fff;
					font-weight: bold;
				}
			}

			.recomDivListItemImg {
				width: 100%;
				height: 100%;
				position: absolute;


				img {
					border-radius: 50rpx 50rpx 50rpx 50rpx;
					width: 100%;
					height: 100%;

				}
			}
		}
	}

	.recomDivTop {
		width: 100%;
		height: 300rpx;
		background-color: #001b05;
		border-radius: 0 0 30rpx 30rpx;
		padding: 0 30rpx;

		.recomDivTopDiv {
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding-top: 20rpx;
			background-color: #001b05;

			.changeRecomDivTopDivItem {
				background-color: #55d090 !important;
				color: #fff;
			}

			.recomDivTopDivItem {
				background-color: #fff;
				display: flex;
				align-items: center;
				justify-content: center;
				gap: 20rpx;
				padding: 20rpx;
				border-radius: 40rpx;

				.recomDivTopDivItemImg {
					padding: 10rpx;
					display: flex;
					align-items: center;
					justify-content: center;
					background-color: #fff;
					border-radius: 50%;
				}

				img {
					width: 30rpx;
					height: 30rpx;
				}
			}
		}
	}

	.recomDiv {
		display: flex;
		align-items: center;
		justify-content: center;

		img {
			width: 100%;
			height: 400rpx;
		}
	}
</style>